<template>
	<view class="left wa psr">
		<view v-if="checkMpa.address && type === '1'" class="p-t-30">
			<text class="ts-40 tb wa left p-lr-50">
				<text class="tc-green">售后服务站点</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-30 p-lr-50">
				<text class="tc-gray">{{checkMpa.name || ''}}</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-30 p-lr-50">
				<text class="tc-gray">联系电话：{{checkMpa.phone || ''}}</text>
			</text>
			<text class="ts-24 wa left m-t-30 p-lr-50">
				<text class="tc-gray">营业时间：{{checkMpa.businesshours || ''}}</text>
			</text>
			<view class="full-count">
				<image src="/static/img/phone.png" @click="callPhone()" style="margin-right: 40rpx;"></image>
				<image src="/static/img/daohang.png" @click="openMap()"></image>
			</view>
		</view>
		<view v-if="type === '2'" class="p-t-30">
			<text class="ts-40 tb wa left p-lr-50">
				<text class="tc-green">车辆位置信息</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-30 p-lr-50">
				<text class="tc-gray">{{markers[0].name || ''}}</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-30 p-lr-50">
				<text class="tc-gray">IMEI：{{markers[0].title || ''}}</text>
			</text>
			<view class="full-count" style="top: 100rpx;">
				<image src="/static/img/daohang.png" @click="openMap()"></image>
			</view>
		</view>
		<view class="ts-30 wa tc left" :class="checkMpa.address || type === '2' ? 'm-t-40' : ''" :style="checkMpa.address || type === '2' ? 'height: calc(100vh - 320rpx);' : 'height: 100vh;'">
			<map 
				v-if="mapShow"
				id="map" 
				:longitude="center.longitude" 
				class="wa" style="height: 100%;"
				:latitude="center.latitude" 
				scale="14" 
				:markers="markers" 
				@markertap="handleMarkerTap">
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapShow: false,
				type: '1',
				center: {
					longitude: '116.397470',
					latitude: '39.908822',
				},
				checkMpa: {
					name: '',
					address: '',
					phone: '',
					businesshours: '',
					longitude: '',
					latitude: '',
				},
				markers: [
					{
						id: 1,
						latitude: 39.908822, // 纬度
						longitude: 116.397470, // 经度
						title: '门店A', // 标记点名称
						iconPath: "/static/img/electric/ya.png", // 标记点图标
						width: 28,
						height: 28,
						callout: {
							content: '门店A', // 气泡框内容（可选）
							display: 'ALWAYS' // 是否显示气泡框，ALWAYS始终显示，BYCLICK点击显示，BYCLICK_DETAIL点击详情页显示，默认为BYCLICK。可选。
						}
					},
					{
						id: 2,
						latitude: 39.91615, // 纬度
						longitude: 116.404681, // 经度
						title: '门店B', // 标记点名称
						iconPath: "/static/img/electric/ya.png", // 标记点图标
						width: 28,
						height: 28,
						callout: {
							content: '门店B', // 气泡框内容（可选）
							display: 'ALWAYS' // 是否显示气泡框，ALWAYS始终显示，BYCLICK点击显示，BYCLICK_DETAIL点击详情页显示，默认为BYCLICK。可选。
						}
					},
					{
						id: 3,
						latitude: 39.91010, // 纬度
						longitude: 116.400081, // 经度
						title: '门店C', // 标记点名称
						iconPath: "/static/img/electric/ya.png", // 标记点图标
						width: 28,
						height: 28,
						callout: {
							content: '门店C', // 气泡框内容（可选）
							display: 'ALWAYS' // 是否显示气泡框，ALWAYS始终显示，BYCLICK点击显示，BYCLICK_DETAIL点击详情页显示，默认为BYCLICK。可选。
						}
					}
				],
				battery: {}
			}
		},
		onLoad(options) {
			if (options.type === '1') {
				this.type = options.type
				this.$xyfun.setNavBar('服务站点地图');
				this.getMap();
			} else {
				console.log(options)
				this.type = options.type
				this.$xyfun.setNavBar('车辆位置信息');
				this.battery.imei = options.imei
				this.center.longitude = Number(options.lat)
				this.center.latitude = Number(options.lng)
				this.battery.name = options.name
				this.markers = []
				let obj = {
					id: 1,
					latitude: Number(options.lat) || 28.242, // 纬度
					longitude: Number(options.lng) || 113.052, // 经度
					iconPath: "/static/img/electric/location.png", // 标记点图标
					width: 28,
					height: 28,
					title: options.imei, // 气泡框内容（可选）
					name: options.name, // 气泡框内容（可选）
					callout: {
						// content: options.imei, // 气泡框内容（可选）
						display: 'ALWAYS' // 是否显示气泡框，ALWAYS始终显示，BYCLICK点击显示，BYCLICK_DETAIL点击详情页显示，默认为BYCLICK。可选。
					}
				}
				this.markers.push(obj)
				this.center = {
					longitude: this.markers[0].longitude,
					latitude: this.markers[0].latitude
				}
				this.mapShow = true
			}
		},
		methods: {
			getMap() {
			    this.$api.get({
					url: '/battery/battery/getShopList',
					loadingTip:'加载中...',
					success: res => {
						this.markers = []
						res.forEach((item, index) => {
							let obj = {
								id: index + 1,
								latitude: item.latitude || 28.242, // 纬度
								longitude: item.longitude || 113.052, // 经度
								title: item.longitude, // 标记点名称
								address: item.address,
								businesshours: item.businesshours,
								phone: item.phone,
								iconPath: "/static/img/electric/server.png", // 标记点图标
								width: 28,
								height: 28,
								name: item.name, // 气泡框内容（可选）
								callout: {
									// content: item.name, // 气泡框内容（可选）
									display: 'ALWAYS' // 是否显示气泡框，ALWAYS始终显示，BYCLICK点击显示，BYCLICK_DETAIL点击详情页显示，默认为BYCLICK。可选。
								}
							}
							this.markers.push(obj)
						})
						this.center = {
							longitude: this.markers[0].longitude,
							latitude: this.markers[0].latitude
						}
						console.log(this.markers)
						this.mapShow = true
					}
				});
			},
			handleMarkerTap(e) {
				if (this.type === '1') {
					this.checkMpa = this.markers[e.markerId-1]
				}
			},
			openMap() {
				if (this.type === '1') {
					uni.openLocation({
						latitude: Number(this.checkMpa.latitude),
						longitude: Number(this.checkMpa.longitude),
						name: this.checkMpa.name, // 位置名
						address: this.checkMpa.address, // 详细地址
						success() {
							console.log('导航成功');
						},
						fail() {
							console.log('打开地图失败');
						}
					});
				} else {
					uni.openLocation({
						latitude: Number(this.markers[0].latitude),
						longitude: Number(this.markers[0].longitude),
						name: '前往车辆位置', // 位置名
						success() {
							console.log('导航成功');
						},
						fail() {
							console.log('打开地图失败');
						}
					});
				}
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.checkMpa.phone,
					success: function () {
						console.log('拨打电话成功');
					},
					fail: function (err) {
						console.error('拨打电话失败：', err);
					}
				});
			},
			// 点击标记点触发导航
			onMarkerTap(e) {
				const marker = this.markers.find(m => m.id === e.markerId);
				if (marker) {
					uni.openLocation({
						latitude: marker.latitude,
						longitude: marker.longitude,
						name: marker.title,
						address: marker.title,
						scale: 18
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.map-container {
		position: relative;
	}
	.popup-content {
		padding: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		width: 80vw;
		text-align: center;
	}
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
	.address {
		color: #666;
		margin: 20rpx 0;
	}
	image {
		width: 200rpx;
		height: 200rpx;
	}
	.full-count {
		position: absolute;
		top: 130rpx;
		right: 50rpx;
		image {
			width: 100rpx;
			height: 100rpx;
		}
		
	}
</style>